<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>商品-确认订单</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/app.css?a=1111"/>
</head>
<body class="isHide">
<div class="ft-wrap height top bto">
    <!--顶部悬浮导航-->
    <div class="ft-head-nav">
        <a class="ft-h-back" href="javascript:;">返回</a>
        <span class="ft-head-text">Place Order</span>
    </div>
    <!--中间滚动内容-->
    <div class="ft-container no-padding height background">
        <div class="ft-overflow">
            <div class="ft-module no-mar no-border area-module">
                <div class="no-area">
                    <div class="module-hd">
                        <label>Ship To:</label>
                    </div>
                    <div class="module-bd no-pad">
                        <div class="area-form">
                            <form method="post" action="" novalidate="novalidate" enctype="multipart/form-data">
                                <div class="area-item mar-b10">
                                    <label class="form-input">
                                        <input type="email" placeholder="Email*" value="">
                                    </label>
                                    <label class="form-input">
                                        <input type="text" placeholder="Full Name*" value="">
                                    </label>
                                </div>
                                <div class="area-item border clearfix">
                                    <div class="float-left width-45">
                                        <label class="form-select">
                                            <span>Country / Region*</span>
                                            <i class="ft-sprite select-icon"></i>
                                            <select>
                                                <option value="1" selected>China</option>
                                                <option value="2">USA</option>
                                                <option value="3">Australian</option>
                                                <option value="4">England</option>
                                                <option value="5">China</option>
                                                <option value="6">China</option>
                                                <option value="7">China</option>
                                            </select>
                                        </label>
                                    </div>
                                    <div class="float-left width-55">
                                        <label class="form-select">
                                            <span>State*</span>
                                            <i class="ft-sprite select-icon"></i>
                                            <select>
                                                <option value="1" selected>1-China</option>
                                                <option value="2">2-USA</option>
                                                <option value="3">3-Australian</option>
                                                <option value="4">4-England</option>
                                                <option value="5">5-China</option>
                                                <option value="6">6-China</option>
                                                <option value="7">7-China</option>
                                            </select>
                                        </label>
                                    </div>
                                </div>
                                <div class="area-item">
                                    <label class="form-input">
                                        <input type="text" placeholder="Street Address*" value="">
                                    </label>
                                    <label class="form-input">
                                        <input type="text" placeholder="Apt. / Bluiding / Doorplate*" value="">
                                    </label>
                                    <label class="form-input">
                                        <input type="text" placeholder="City*" value="">
                                    </label>
                                </div>
                                <div class="area-item clearfix">
                                    <div class="float-left width-50">
                                        <label class="form-input">
                                            <input type="number" placeholder="Zip / Postal Code*" value="">
                                        </label>
                                    </div>
                                    <div class="float-left width-50">
                                        <label class="form-input">
                                            <input type="number" placeholder="Phone*" value="">
                                        </label>
                                    </div>
                                </div>
                                <div class="area-item background pad-all15">
                                    <a class="ft-cart-btn active" href="javascript:;">Save Shipping Address</a>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="has-area" style="display: none">
                    <div class="module-hd">
                        <label>Shipping Address</label>
                    </div>
                    <div class="module-bd">
                        <div class="area-intro">
                            <a href="#">
                                <i class="ft-sprite area-icon"></i>
                                <label class="area-user">Zhuang Shibin</label>
                                <span class="area-site">Ostest 33 Ostest American Samoa 111 United States United States</span>
                                <i class="ft-sprite arrow-icon"></i>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="area-line"></div>
            </div>
            <div class="ft-module order-module">
                <div class="module-hd">
                    <label>Order 1</label>
                    <span>( Sold by JAZZEVAR Official Store )</span>
                </div>
                <div class="module-bd no-pad">
                    <div class="order-intro">
                        <ul class="order-list">
                            <li>
                                <a href="#">
                                    <div class="order-cont">
                                        <label class="order-img"><img src="../img/product5.jpg"></label>
                                        <div class="order-detail">
                                            <label class="order-name t-clamp">Fashion Stainless Steel Practice Trang
                                                Butterfly KnifePrace</label>
                                            <label class="order-sort">Brown, 15.6</label>
                                            <label class="order-money">US$20.00<span>x1</span></label>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="order-cont">
                                        <label class="order-img"><img src="../img/product2.jpg"></label>
                                        <div class="order-detail">
                                            <label class="order-name t-clamp">Fashion Stainless Steel Practice Trang
                                                Butterfly KnifePrace</label>
                                            <label class="order-sort">Brown, 18.6</label>
                                            <label class="order-money">US$200.00<span>x2</span></label>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                        <div class="order-cost">
                            <div class="cost-item pad-left">
                                <span class="cost-name">Shipping:</span>
                                <label class="cost-intro">
                                    <a href="#">
                                        <span class="express-name">EMS快递</span>
                                    <span class="express-cost"><i
                                            class="color-war">US$3.50</i> & 7-20 businessdays</span>
                                        <i class="ft-sprite arrow-icon"></i>
                                    </a>
                                </label>
                            </div>
                            <div class="cost-item">
                                <span class="cost-name">Shipping Fee:</span>
                                <span class="cost-fee">US$3.50</span>
                            </div>
                            <div class="cost-item">
                                <span class="cost-name">Total:</span>
                                <span class="cost-total">US$123.50</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ft-module order-module">
                <div class="module-hd">
                    <label>Order 2</label>
                    <span>( JAZZEVAR )</span>
                </div>
                <div class="module-bd no-pad">
                    <div class="order-intro">
                        <ul class="order-list">
                            <li>
                                <a href="#">
                                    <div class="order-cont">
                                        <label class="order-img"><img src="../img/product1.jpg"></label>
                                        <div class="order-detail">
                                            <label class="order-name t-clamp">Fashion Stainless Steel Practice Trang
                                                Butterfly KnifePrace</label>
                                            <label class="order-sort">Brown, 15.6</label>
                                            <label class="order-money">US$20.00<span>x1</span></label>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <div class="order-cont">
                                        <label class="order-img"><img src="../img/product3.jpg"></label>
                                        <div class="order-detail">
                                            <label class="order-name t-clamp">Fashion Stainless Steel Practice Trang
                                                Butterfly KnifePrace</label>
                                            <label class="order-sort">Brown, 18.6</label>
                                            <label class="order-money">US$200.00<span>x2</span></label>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </ul>
                        <div class="order-cost">
                            <div class="cost-item pad-left">
                                <span class="cost-name">Shipping:</span>
                                <label class="cost-intro">
                                    <a href="#">
                                        <span class="express-name">EMS快递</span>
                                        <span class="express-cost"><i class="color-suc">US$3.50</i> & 7-20 businessdays</span>
                                        <i class="ft-sprite arrow-icon"></i>
                                    </a>
                                </label>
                            </div>
                            <div class="cost-item">
                                <span class="cost-name">Shipping Fee:</span>
                                <span class="cost-fee">US$3.50</span>
                            </div>
                            <div class="cost-item">
                                <span class="cost-name">Total:</span>
                                <span class="cost-total">US$123.50</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="ft-module pay-module">
                <div class="module-hd has-icon">
                    <i class="ft-sprite pay-icon"></i>
                    <label>Payment method</label>
                </div>
                <div class="module-bd no-pad">
                    <ul class="pay-list">
                        <li>
                            <div class="pay-name float-left">
                                <i class="ft-sprite wallet-icon"></i>
                                <span>My wallet</span>
                            </div>
                            <div class="select-bar float-right">
                                <span>US$500.00</span>
                                <label class="ft-radio">
                                    <input type="radio" name="payMethod" value="">
                                    <span></span>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="pay-name float-left">
                                <i class="ft-sprite pal-icon"></i>
                                <span>PayPal</span>
                            </div>
                            <div class="select-bar">
                                <label class="ft-radio active">
                                    <input type="radio" name="payMethod" value="" checked>
                                    <span></span>
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="pay-name float-left">
                                <i class="ft-sprite card-icon"></i>
                                <span>Credit or Debit Card</span>
                            </div>
                            <div class="select-bar">
                                <label class="ft-radio">
                                    <input type="radio" name="payMethod" value="">
                                    <span></span>
                                </label>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="ft-module coupon-module">
                <div class="module-hd has-icon">
                    <i class="ft-sprite coupon-icon"></i>
                    <label>Use Coupon</label>
                </div>
                <div class="module-bd no-pad">
                    <div class="coupons-list">
                        <a class="coupons-sel" href="javascript:;">
                            <span>1 Coupons</span>
                            <i class="ft-sprite arrow-icon"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="ft-module total-module">
                <div class="module-hd has-icon">
                    <i class="ft-sprite total-icon"></i>
                    <label>Order Total</label>
                </div>
                <div class="module-bd">
                    <div class="total-bar">
                        <p>
                            <span>Order subtotal:</span>
                            <span class="float-right">US$140.00</span>
                        </p>
                        <p>
                            <span>Shipping fee:</span>
                            <span class="float-right">US$3.50</span>
                        </p>
                        <p>
                            <span>Discount:</span>
                            <span class="float-right">US$0.00</span>
                        </p>
                        <p class="total-specail">
                            <span>Grand Total:</span>
                            <span class="float-right">US$143.50</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="McAfee">
                <label class="ft-img-box"><img src="../img/McAfee.png"></label>
                <span class="t-clamp">Your information is protected and safe at all time</span>
            </div>
        </div>
    </div>
    <!--底部确认悬浮-->
    <div class="details-buy background">
        <div class="buy-bar">
            <div class="buy-intro-money">
                <label class="buy-money">
                    <span>US$80.00</span>
                </label>
            </div>
            <a class="buy-btn" href="javascript:;"><i>Place Order</i></a>
        </div>
    </div>
    <!--快递信息-->
    <div class="ft-pop-disk ft-express-bar" id="expressBar">
        <div class="ft-pop-box ft-express-box animated-bottom" id="expressBox">
            <div class="pos-abs-tl express-box-header">
                <div class="ft-header in-header border">
                    <span class="ft-head-title in-head-title"><i>Shipping</i></span>
                    <div class="ft-menu-btn in-right-btn">
                        <a class="in-shipping-btn" href="javascript:;" id="Shipping">
                            <i class="in-shipping-icon ft-sprite">关闭</i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="buy-box-cont ft-overflow">
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
                <div class="buy-row clearfix">
                    <span class="float-left">EMS快递公司</span>
                    <span class="color-orange float-right">$140</span>
                </div>
            </div>
        </div>
    </div>
    <!--优惠券-->
    <div class="ft-pop-disk ft-express-bar" id="couponBar">
        <div class="ft-pop-box ft-express-box animated-bottom" id="couponBox">
            <div class="pos-abs-tl express-box-header">
                <div class="ft-header in-header border">
                    <span class="ft-head-title in-head-title"><i>Coupons</i></span>
                    <div class="ft-menu-btn in-right-btn">
                        <a class="in-shipping-btn" href="javascript:;" id="coupon">
                            <i class="in-shipping-icon ft-sprite">关闭</i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="buy-box-cont ft-overflow">
                <div class="pop-coupons-bd height">
                    <div class="ft-overflow">
                        <ul class="">
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$500000000.00</i> Coupons</span>
                                            <span>Orders over <i>$ 0.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="coupons-item clearfix">
                                    <div class="coupon-intro active">
                                        <div class="coupon-bg">
                                            <span><i>$50.00</i> Coupons</span>
                                            <span>Orders over <i>$ 5890.00</i></span>
                                        </div>
                                    </div>

                                    <div class="coupon-date clearfix">
                                        <div class="coupon-time t-ellipsis active">Expire on: Mar 23 2017</div>
                                        <div class="coupon-tips active">BSKADFH</div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="../js/jquery-1.11.1.min.js"></script>
<script src="../js/box.js"></script>
<script src="../js/ft-common.js"></script>
<script src="../js/pageScript.js"></script>
<script>
    $(function () {
        //弹出框
        $(".buy-btn").click(function () {
            if ($(".pay-list li:eq(0)").find(".ft-radio").hasClass("active")) {
                var money = $(".buy-money span").text();
                var payStr = "\
                    <div class='pay-disk'>\
                        <p class='pay-money'><span>Total amount :</span>" + money + "</p>\
                        <label class='pay-password'><input type='password' value='' placeholder='Payment Password'></label>\
                        <span class='pay-tips'>First enter the password will be set as your default payment of a password.</span>\
                    </div>\
                   ";
                $.jConfirm({
                    title: "Paid by Wallet Balance",
                    intro: payStr
                }, [
                    {
                        text: "Cancel",
                        css: {
                            "color": "#666666"
                        }
                    },
                    {
                        text: "Place Order",
                        callback: function () {
                            console.log("付款咯~");
                        }
                    }
                ], "H", "", {
                    width: 250,
                    titleCss: {"borderBottom": "1px solid #dcdcdc", "padding": "13px 0 10px 0", "margin": "0"},
                    tipsBarCss: {"paddingBottom": "0"}
                });
            }
        });
        //单选
        selectRadio(".pay-list li");
        //下拉框
        var $selcet = $(".form-select select");
        $selcet.change(function () {
            var _val = $(this).find("option:selected").val();
            var _text = $(this).find("option:selected").text();
            $(this).parents(".form-select").addClass("active").find("span").text(_text).data("value", _val);
        });
        $selcet.blur(function () {
            $(this).change();
        });

        //选择快递
        popLeftMenu({
            clickEle: ".cost-intro",
            diskEle: "#expressBar",
            animateEle: "#expressBox"
        });
        //关闭窗口
        $("#Shipping").click(function () {
            $("#expressBar").click();
        });

        //选择优惠券
        popLeftMenu({
            clickEle: ".coupons-sel",
            diskEle: "#couponBar",
            animateEle: "#couponBox"
        });
        //关闭窗口
        $("#coupon").click(function () {
            $("#couponBar").click();
        });
    })
</script>
</body>
</html>